

.login_body {
	/* 弹性布局 让页面元素垂直+水平居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 让页面始终占浏览器可视区域总高度 */
	height: 100vh;
	/* 背景渐变色 */
	background: linear-gradient(rgb(82, 160, 163), #73af96);
	// background: url('../img/login/login.jpg') no-repeat right top;

	.login {
		/* 弹性布局 让子元素称为弹性项目 */
		display: flex;
		/* 让弹性项目垂直排列 原理是改变弹性盒子的主轴方向 父元素就是弹性盒子 现在改变后的主轴方向是向下了 */
		flex-direction: column;
		/* 让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下 交叉轴的方向是与主轴垂直 交叉轴的方向是向右 */
		align-items: center;
		width: 400px;
		padding: 40px;
		background-color: rgba(0, 0, 0, 0.2);
		box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
		.loginType {
			width: 100%;
			display: flex;
			justify-content: space-around;
			color: white;
			font-size: 15px;
			margin-bottom: 30px;
			.active_type {
				color: white;
			}
			span {
				cursor: pointer;
				color: #929797;
				&:hover {
					color: white;
				}
			}
		}
		.login_box {
			/* 相对定位 */
			position: relative;
			width: 100%;
			.sendNumber {
				position: absolute;
				top: 0;
				right: -37%;
				padding: 10px 5px;
				background: white;
				border-radius: 4px ;
				cursor: pointer;
			}
			input {
				/* 清除input框自带的边框和轮廓 */
				outline: none;
				border: none;
				width: 100%;
				padding: 10px 0;
				margin-bottom: 30px;
				color: #fff;
				font-size: 16px;
				border-bottom: 1px solid #fff;
				/* 背景颜色为透明色 */
				background-color: transparent;
			}
			label {
				position: absolute;
				top: 0;
				left: 0;
				padding: 10px 0;
				color: #fff;
				/* 这个属性的默认值是auto 默认是这个元素可以被点击 但是如果我们写了none 就是这个元素不能被点击 , 就好像它可见但是不能用 可望而不可即 */
				/* 这个就是两者的区别 */
				pointer-events: none;
				/* 加个过渡 */
				transition: all 0.5s;
			}
			input:focus + label,
			input:valid + label {
				top: -20px;
				color: #03e9f4;
				font-size: 12px;
			}
		}
		a {
			overflow: hidden;
			position: relative;
			padding: 10px 20px;
			color: #03e9f4;
			/* 取消a表现原有的下划线 */
			text-decoration: none;
			/* 同样加个过渡 */
			transition: all 0.5s;
			&:hover {
				color: #fff;
				border-radius: 5px;
				background-color: #03e9f4;
				box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
					0 0 100px #03e9f4;
			}
			span:first-child {
				top: 0;
				left: -100%;
				width: 100%;
				height: 2px;
				/* to right 就是往右边 下面的同理 */
				background: linear-gradient(to right, transparent, #03e9f4);
				/* 动画 名称 时长 linear是匀速运动 infinite是无限次运动 */
				animation: move1 1s linear infinite;
			}
			span:nth-child(2) {
				right: 0;
				top: -100%;
				width: 2px;
				height: 100%;
				background: linear-gradient(transparent, #03e9f4);
				/* 这里多了个0.25s其实是延迟时间 */
				animation: move2 1s linear 0.25s infinite;
			}
			span:nth-child(3) {
				right: -100%;
				bottom: 0;
				width: 100%;
				height: 2px;
				background: linear-gradient(to left, transparent, #03e9f4);
				animation: move3 1s linear 0.5s infinite;
			}
			span:last-child {
				left: 0;
				bottom: -100%;
				width: 2px;
				height: 100%;
				background: linear-gradient(#03e9f4, transparent);
				animation: move4 1s linear 0.75s infinite;
			}
			span {
				position: absolute;
			}
		}
		.lastInput {
			width:73% ;
			align-self: flex-start;
		}
		.bottomDesc {
			width: 100%;
			display: flex;
			justify-content: space-between;
			span {
				color: white;
				cursor: pointer;
			}
		}

    //扫码登录
    .QRcode {
      width: 240px;
      height: 240px;
      position: relative;
      .QRcode_overtime {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.68);
        color: #fff;
        text-align: center;
        z-index: 2;
        font-size: 18px;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
          margin-top: 15px;
        }
      }
      .QRcode_success {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.68);
        color: #fff;
        text-align: center;
        z-index: 3;
        font-size: 18px;
      }
      .QRcode_img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
      }
    }
    .tips{
      margin-top: 10px;
    color: white;
    }
	}
}
/* :focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器 去找与input相邻的兄弟label */
/* :valid 选择器是判断input框的内容是否合法,如果合法会执行下面的属性代码,不合法就不会执行,我们刚开始写布局的时候给input框写了required 我们删掉看对比 当没有required的话input框的值就会被认为一直合法,所以一直都是下方的样式 ,但是密码不会,密码框内的值为空,那么这句话局不合法,required不能为空 当我们给密码框写点东西的时候才会执行以下代码*/
@keyframes move1 {
	0% {
		left: -100%;
	}
	50%,
	100% {
		left: 100%;
	}
}
@keyframes move2 {
	0% {
		top: -100%;
	}
	50%,
	100% {
		top: 100%;
	}
}
@keyframes move3 {
	0% {
		right: -100%;
	}
	50%,
	100% {
		right: 100%;
	}
}
@keyframes move4 {
	0% {
		bottom: -100%;
	}
	50%,
	100% {
		bottom: 100%;
	}
}